<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/js/swiper.js"></script>
		<script src="js/jquery-2.2.3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/subway.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<style type="text/css">
			#moveImgA {
				z-index: 10;
				position: relative;
				width: 287px;
				height: 154px;
				top: -360px;
				left: -1px;
				overflow: hidden;
			}
			
			#moveImgA1,
			#moveImgB1,
			#moveImgC1 {
				position: absolute;
				top: -157px;
				z-index: 15;
			}
			
			#moveImgA2,
			#moveImgB2,
			#moveImgC2 {
				position: absolute;
				left: -287px;
				top: 30px;
				z-index: 15;
			}
			
			#moveImgA3,
			#moveImgB3,
			#moveImgC3 {
				position: absolute;
				left: -287px;
				bottom: 0px;
				z-index: 15;
			}
			
		</style>
	</head>

	<body>

		<div id="overall">
			<header>
				<!--最上部文字-->
				<div id="language">
					<span class="span1">中国</span>
					<select id="Sele">
						<option selected="selected" value="">Select Language</option>
						<option value="EN">English</option>
						<option value="CN">Chinese</option>
					</select>
					<span class="span1">|</span>
					<a href="http://www.subway.com/en-us">进入全球官网</a>
				</div>
				<!--菜单栏-->
				<div id="logo">
					<img src="img/QQ20170408-0.jpg" />
					<div class=" vitta1"></div>
					<div class=" vitta2"></div>
					<ul class="theUl">
						<li>
							<a href="###">新闻动态</a>
						</li>
						<li>
							<a href="###" id="top">美食与营养</a>
						</li>
						<li>
							<a href="subway3.html">加盟流程</a>
						</li>
						<li>
							<a href="subway5.html">关于我们</a>
						</li>
						<li id="theli">
							<a href="###">快餐店位置查询</a>
						</li>
					</ul>
				</div>
				<!--全效果下拉菜单-->
				<ul id="drop_menu" class="drop-menu">
					<li>
						<a>超值 Value</a>
					</li>
					<li>
						<a>经典 Classics</a>
					</li>
					<li>
						<a>精选 Premium</a>
					</li>
					<li>
						<a>低脂 Low Fat</a>
					</li>
					<li>
						<a>百味卷 Warp</a>
					</li>
					<li>
						<a>沙拉 Salad</a>
					</li>
					<li>
						<a>聚餐服务 Catering</a>
					</li>
					<li>
						<a>饮料和小食 Drinks & Sides</a>
					</li>
					<li>
						<a>早餐 Breakfast</a>
					</li>
					<li>
						<a>营养 Nutrition</a>
					</li>
					<li>
						<a>如何点餐 How To Order</a>
					</li>
				</ul>

			</header>
			<!--左侧商品图-->
			<div id="big">
				<div id="left" class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="img/photo/首页(英文)_files/20160929204151052ccd.jpg" />
						</div>
						<div class="swiper-slide">
							<img src="img/photo/首页(英文)_files/20160401175143b772fd.png" />
						</div>
					</div>
					<div class="swiper-button-prev swiper-button-white"></div>
					<div class="swiper-button-next swiper-button-white"></div>
				</div>
				<!--右侧商品图-->
				<div id="right" class="swper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="img/pic1.jpg" /></div>
						<div class="swiper-slide"><img src="img/photo/首页_files/pic2.jpg" /></div>
						<div class="swiper-slide"><img src="img/pic3.jpg" /></div>
					</div>
					<div id="moveImgA">
						<div id="moveImgA1"><img src="img/47A10240D8DD67A57875FBD1497C6CAE.png" /></div>
						<div id="moveImgA2"><img src="img/A7E286EE86076C463CBDD5E87F0FB20A.png" /></div>
						<div id="moveImgA3"><img src="img/000E0D4F5420FE5EE4CE6D894B90A78D.png" /></div>
						<div id="moveImgB1"><img src="img/E71001D1974DC19F1CFB445F72720C0C.png" /></div>
						<div id="moveImgB2"><img src="img/1602358A68F5F7829236238C09872137.png" /></div>
						<div id="moveImgB3"><img src="img/5B0A252FEDC139D905D42027B1E24E8D.png" /></div>
						<div id="moveImgC1"><img src="img/3FE803DB6EA90B114FA23B60AB3CEF7D.png" /></div>
						<div id="moveImgC2"><img src="img/C146CB58339CBD29FF4E845E1D7668F5.png" /></div>
						<div id="moveImgC3"><img src="img/911DF3515A43BA5A9BB36174D971A7A2.png" /></div>
					</div>
				</div>
			</div>

			<!--下侧图标-->
			<div id="dow">
				<div class="dowLeft">
					<a href="###"><img src="img/photo/首页_files/home-box-1_CN.jpg" /></a>
					<a href="###"><img src="img/photo/首页_files/home-box-2_CN.jpg" /></a>
					<a href="###"><img src="img/photo/首页_files/home-box-3_CN.jpg" /></a>
				</div>
				<!--右侧图片-->
				<div id="dowRight">
					<a href="###"><img src="img/photo/首页_files/weibo_CN.jpg" /></a>
					<a href="###"><img src="img/photo/首页_files/weixin_CN.jpg" id="weixin" /></a>
				</div>

				<img src="img/photo/首页_files/code.png" id="barcode2D" />

			</div>
			<!--尾部标签-->
			<p id="b-top">
				<a href="###">主页</a>丨
				<a href="###">菜单/营养</a> 丨
				<a href="###">如何加盟 </a> 丨
				<a href="###">关于我们</a> 丨
				<a href="###">快餐店位置查询</a>
				<br />
				<a href="###">联系我们</a> 丨
				<a href="###"> 使用条款</a> 丨
				<a href="###">隐私权政策</a> 丨
				<a href="###">SUBWAY Partners™</a>
			</p>
			<p id="b-bottom">
				SUBWAY® is a Registered Trademark of Subway IP Inc.
				<br /> ®2016 Subway IP Inc.
			</p>
		</div>

		<script>
			var Top = document.getElementById("top");
			var drop_menu = document.getElementById("drop_menu");
			var weiXin = document.getElementById("weixin");
			var barcode2D = document.getElementById("barcode2D");
			//菜单子列表显现隐藏
			Top.onmouseover = function() {
				drop_menu.style.display = "block";

			}
			drop_menu.onmousemove = function() {
				drop_menu.style.display = "block";
			}
			drop_menu.onmouseout = function() {
				drop_menu.style.display = "none";
			}

			//左侧汉堡动画效果
			var mySwiper = new Swiper('.swiper-container', {
				autoplay: 2000,
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
			})
			//微信二维码
			weiXin.onmousemove = function() {
				barcode2D.style.display = "block";
			}
			weiXin.onmouseout = function() {
				barcode2D.style.display = "none";
			}
			// 右边图片动画效果
			var theSwiper = new Swiper('.swper-container', {
				autoplay: 7000,
				effect: 'fade',
				fade: {
					crossFade: false,
				}
			})

			function moveImg() {
				$("#moveImgA1").animate({ marginTop: "157px" }, 1000, function() {
					$("#moveImgA2").animate({ marginLeft: "287px" }, 1000, function() {
						$("#moveImgA3").animate({ marginLeft: "287px" }, 1000, function() {
							$("#moveImgA2")
								.delay(2000)
								.animate({ marginLeft: "574px" }, 1000, function() {
									$("#moveImgA3").animate({ marginLeft: "574px" }, 1000, function() {
										$("#moveImgA1").animate({ marginTop: "-157px" }, function() {
											// 第二个动画
											$("#moveImgB1").animate({ marginTop: "157px" }, 1000, function() {
												$("#moveImgB2").animate({ marginLeft: "287px" }, 1000, function() {
													$("#moveImgB3").animate({ marginLeft: "287px" }, 1000, function() {
														$("#moveImgB2")
															.delay(2000)
															.animate({ marginLeft: "574px" }, 1000, function() {
																$("#moveImgB3").animate({ marginLeft: "574px" }, 1000, function() {
																	$("#moveImgB1").animate({ marginTop: "-157px" }, function() {
																		// 第三个动画
																		$("#moveImgC1").animate({ marginTop: "157px" }, 1000, function() {
																			$("#moveImgC2").animate({ marginLeft: "287px" }, 1000, function() {
																				$("#moveImgC3").animate({ marginLeft: "287px" }, 1000, function() {
																					$("#moveImgC2")
																						.delay(2000)
																						.animate({ marginLeft: "574px" }, 1000, function() {
																							$("#moveImgC3").animate({ marginLeft: "574px" }, function() {
																								$("#moveImgC1").animate({ marginTop: "-157px" }, function() {
																									$("#moveImgA2").css({ marginLeft: "-574px" })
																									$("#moveImgA3").css({ marginLeft: "-574px" })
																									$("#moveImgB2").css({ marginLeft: "-574px" })
																									$("#moveImgB3").css({ marginLeft: "-574px" })
																									$("#moveImgC2").css({ marginLeft: "-574px" })
																									$("#moveImgC3").css({ marginLeft: "-574px" })
																									moveImg();

																								})
																							})
																						})
																				})
																			})
																		})
																	})
																})
															})
													})
												})
											})
										})
									})
								})

						})
					})
				});
			}
			moveImg()
		</script>
	</body>

</html>